<template>
  <div>
    <video
      id="myVideo"
      ref="myVideo"
      controls
      class="video-js vjs-big-play-centered"
      style="height:665px;max-width:887px"
    >
      <source
        :src="videoUrl"
        type="video/mp4"
      >
</video>
  </div>
</template>

<script>
import Video from 'video.js'
import 'video.js/dist/video-js.css'


export default {
  data() {
    return {
      playHandler: null,
      videoUrl: 'http://kefuzhihua-1300902972.cos.ap-nanjing.myqcloud.com/1642488976180-c6883103-0bbc-4a0a-97b8-b598add8b943_material%20%281%29.mp4'
    }
  },
 mounted() {
    this.fetchVideoList(this.id)
    setTimeout(() => {
      this.initVideo()
    }, 300)
  },
  beforeDestroy() {
    this.playHandler.dispose()
  },
  async initVideo() {
      this.$nextTick(() => {
        this.playHandler = Video('myVideo', {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          // 自动播放属性,muted:静音播放
          autoplay: 'muted',
          // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: 'auto',
          // 设置视频播放器的显示宽度（以像素为单位）
          width: '887px',
          // 设置视频播放器的显示高度（以像素为单位）
          height: '665px'
        })
      })
    },
    
    /**
     * @function  获取视频素材详情
     */
    async fetchVideoList(id) {
      const res = await materialApi.query({ id })
      if (res.code === 0) {
        this.form = res.data
        // document.getElementById('myVideo').src = this.videoUrl
        this.$refs.myVideo.src = res.data.cosPath
        console.log(this.form, 'this.video.form', this.$refs.myVideo.src)
      }
    }
}
</script>

<style>
@import 'video.js/dist/video-js.css';
</style>